axios.defaults.baseURL = '	http://ajax-api.itheima.net'
const list = document.querySelector('.top');

const renderList = async() => {
  const { data: res } = await axios.get('/api/category/top')
  // console.log(res);
  const newArr = res.data.map(
    (item) => {
      return axios.get('/api/category/sub?id='+item.id)
    }
  )
  const pua = await Promise.all(newArr)
  console.log(pua);
  const html = pua.map(({data:item}) => {
  console.log(item);
  return`<li>
  <a href="javascript:;">${item.data.name}</a>
  <img
    src="${item.data.picture}"
    alt="" />
  <ul class="sub">
   ${item.data.children.map((item)=>{
    return ` <li>
      <a href="javascript:;">
        <span>${item.name}</span>
        <img src="${item.picture}"
          alt="" />
      </a>
    </li>`
   }).join('')}
  </ul>
</li>`
  }).join('')
  list.innerHTML = html
}

renderList()